<template>
  <div class="detail">
      <div class="swiper">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="black">
            <van-swipe-item v-for="item in banner" :key="item.id">
                <img :src="item.img_url" alt="">
            </van-swipe-item>
          </van-swipe>
      </div>
      <div class="content">
        <van-row>
            <van-col span="8"><van-icon name="checked" />30天无忧退货</van-col>
            <van-col span="8"><van-icon name="checked" />48小时快速退款</van-col>
            <van-col span="8"><van-icon name="checked" />满88元免邮费</van-col>
        </van-row>  
        <div class="desc">
            <h1>{{goodsInfo.name}}</h1>
            <div class="goods_desc">{{goodsInfo.goods_brief}}</div>
            <div class="price">{{goodsInfo.retail_price | trimCash}}</div>
        </div>
        <div class="popup" >
            <div class="popup-box" @click="show = !show">
                <div class="pop">展示弹出层</div>
                <van-icon name="arrow" />
            </div>
         
        </div>
      </div>
      
      <div class="attribute">
          <div class="headline">
              商品参数
          </div>
        <ul v-for="item in attribute" :key="item.id">
           <li>{{item.name}}</li>
           <li>{{item.value}}</li>            
        </ul>
     </div>  
    
    <div class="htmlBox" >
        <div class="box" ref="html">
        </div>
    </div>

    <div class="problem">
        <div class="title"><span>常见问题</span></div>
        <div class="box" v-for="item in question" :key="item.id">
            <h2 class="question">{{item.question}}</h2>
            <div class="answer">{{item.answer}}</div>
        </div>
    </div>


    <GuessLike :inpRes="guessLike" @acceptGoodsId="receiveGoods"/>

    <van-sku
    v-model="show"
    :sku="sku"
    :goods="goods"
    :goods-id="goodsId"
    :hide-stock="false"
    ref="detailSku" 
    />

    <van-goods-action >
    <van-goods-action-icon :icon="collect ? 'star':'star-o'" :color="collect? 'red' : ''" :text="collect ?'已收藏':'未收藏'"  @click="checkCollect" />
    <van-goods-action-icon icon="cart-o" text="购物车" :badge="collectQuantity"  @click="toCart" />
    <van-goods-action-button type="warning" text="加入购物车"  @click="joinCart"/>
    <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>    
  </div>
</template>

<script>
import GuessLike from '@/components/guessLike'
export default {
    name:'detail',
    data(){
        return{
            goodsId:'',
            userInfo:'',
            // 接收到的
            banner:[],
            goodsInfo:{},
            attribute:[],
            question:[],
            guessLike:[],

            // 购物车栏需要传
            collect:false,
            // 购物车数量
            collectQuantity:0,
            // SKU显示框相关

            show: false,
            sku: {
                // 数据结构见下方文档
                tree:[],
                price:'',
                stock_num:3
            },
            goods: {
               picture: ''
                // 数据结构见下方文档
            },
            messageConfig: {
                // 数据结构见下方文档
            },
        

        }
    },
    components:{
        GuessLike,
    },
    mounted(){
        this.refatchy(1)
    },
    methods:{
        // 转跳购物车
        toCart(){
            this.$router.push('/cart')
        },

        // 子组件guess的点击 或者进入页面时重新请求
        refatchy(item){
            if(item){
                this.goodsId = this.$route.query.goodsId
            }
            this.getSession()
            this.reqDetail()
            this.guessyoulike()
            this.getCartQuantity() 
             
        },
        // 按ID请求数据
        async reqDetail(){
            let result = await this.$api.goods.reqGoodsDetail({params:{
                goodsid:this.goodsId,
                openId:this.userInfo.id
            }})
            if(result.status == 200){
                this.goods.picture =  result.info.list_pic_url
                this.sku.stock_num = result.info.sell_volume
                this.sku.price = result.info.retail_price.toFixed(2)
                
                this.banner = result.data
                this.goodsInfo =result.info
                this.attribute =result.attribute
                this.question = result.question
                this.$refs.html.innerHTML = this.goodsInfo.goods_desc
            }
        },
        
        // 获取SESSTION
        getSession(){
             this.token = this.$token.transObj('token') || ""
             this.userInfo = this.$token.transObj('userInfo') || ''
             
        },
        //猜你喜欢,同类目其它商品
        async guessyoulike(){
          let result = await this.$api.goods.goodsGuessyou({params:{goodsid:this.goodsId}})
          this.guessLike = result.guessLike
        },
        // 猜你喜欢传来的Id
        receiveGoods(id){
            this.goodsId = id
            this.$router.replace({ path:'/detail' })
        },
        // 获取购物车数量
        async getCartQuantity(){
           let {userInfo,token} = this.$token.getToken()
           if(token){
               let result =  await this.$api.goods.reqCollectQuantity({params:{goodsid:this.goodsId,openId:userInfo.username}})
               this.collect = result.collection
               this.collectQuantity = result.shopCartQuantity
           }
        },

        // 改变收藏状态
       async checkCollect(){
           let {userInfo,token} = this.$token.getToken()
            if(!token){
                    this.$toast.fail('请先登陆')
                    setTimeout(() => {
                        this.$toast.clear()
                        return  this.$router.push('/register')
                    }, 1900);
                }else{
                    let result = await this.$api.goods.reqToggleCollect({goodsid:this.goodsId,openId:userInfo.username})
                    this.collect = result.collection                    
                }
        },

        // 立即加入购物车
        async joinCart(){
            if(this.show){
                // 获取购物车数量
               var cartdata = this.$refs.detailSku.getSkuData()
               let {userInfo,token} = this.$token.getToken()
                this.userInfo = userInfo
                if(!token){
                    this.$toast.fail('请先登陆')
                    setTimeout(() => {
                        this.$toast.clear()
                        return  this.$router.push('/register')
                    }, 1900);
                }else{
                    let result = await this.$api.goods.reqJoinCart({goodsId:cartdata.goodsId,openId:userInfo.username,quantity:cartdata.selectedNum})
                    if(result.status ==200){
                        this.$toast.success('加入购物车成功')
                        this.getCartQuantity()
                        this.show = false
                    }
                }
            }else{
                this.show = true
            }
        },




    },
    watch:{

    }

}
</script>

<style lang="less" scoped>
@import './index.less';

</style>